<template>
   <div>
    <div style="background-color:aliceblue;height: 50px;" class="parent">
      <el-button @click="drawer = true">新增房型</el-button>
      <el-button @click="handleAllDelete()">批量删除</el-button>
      <el-input
      v-model="Roomtype.roomTypeName"
      style="max-width: 600px;"
      placeholder="房型名称"
      class="input-with-select"
    >
    <template #append>
        <el-button @click="GetRoomType"/>
      </template>
  </el-input>
    </div>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <div style="background-color:aliceblue;height: 700px;">
      <el-table ref="selectedRows" :data="RoomtypeData" stripe style="width: 100%">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="roomName" label="房型名称"  />
        <el-table-column prop="roomPrice" label="门市价(元)"  />
        <el-table-column prop="roomPrice" label="押金(元)" />
        <el-table-column prop="number" label="房间数量"  />
        <el-table-column prop="area" label="面积"  />
        <el-table-column prop="address" label="操作">
          <template #default="{row}">
            <el-button type="text" @click="Getupdate(row)">编辑</el-button>
            <el-button type="text" @click="RoomNo(row)">设置房号</el-button>
            <el-button type="text">投放</el-button>
            <el-button type="text" @click="GetdelRoomType(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
   <!-- 房型添加 -->
  <el-drawer v-model="drawer" size="70%" title="I am the title" :with-header="false">
    <span>
      <el-form :model="from" label-width="auto" style="max-width: 600px">
        <el-form-item label="房间名称">
          <el-input v-model="from.roomName" />
        </el-form-item>
        <el-form-item label="门市价">
          <el-input v-model="from.roomPrice" />
        </el-form-item>
        <el-form-item label="押金">
          <el-radio-group v-model="from.deposit">
            <el-radio value="false">不需要</el-radio>
            <el-radio value="true">需要</el-radio>
         </el-radio-group>
        </el-form-item>
      <el-form-item label="房型面积">
          <el-input v-model="from.area" />
        </el-form-item>
        <el-form-item label="可住人数">
          <el-input v-model="from.number" />
        </el-form-item>
        <el-form-item label="可否加床">
          <el-radio-group v-model="from.extraBed">
        <el-radio value="1">不可加床</el-radio>
        <el-radio value="2">免费家床</el-radio>
        <el-radio value="3">收费加床</el-radio>
        <el-radio value="4">自定义</el-radio>
      </el-radio-group>
        </el-form-item>
       
      <el-form-item label="房型照片">
        <el-upload
          class="avatar-uploader"
          action="https://localhost:44392/PostImag"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="from.roomPhoto" :src="from.roomPhoto" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
      </el-form-item>

      <el-form-item label="房型视频">
        <el-upload
          class="avatar-uploader"
          action="https://localhost:44392/PostImag"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="from.roomVideo" :src="from.roomVideo" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
      </el-form-item>
      <el-form-item label="VR">
        <el-upload
          class="avatar-uploader"
          action="https://localhost:44392/PostImag"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="from.roomVail" :src="from.roomVail" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
      </el-form-item>
      <el-form-item label="房型介绍">
      <el-input v-model="from.roomDesc" type="textarea" />
    </el-form-item>
     
    <el-form-item>
      <el-button type="primary" @click="RoomAdd">确定</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
    </span>
  </el-drawer>
  <!-- 房型修改 -->
  <el-drawer v-model="drawer1" size="70%" title="I am the title" :with-header="false">
    <span>
      <el-form :model="fromupodate" label-width="auto" style="max-width: 600px">
        <el-form-item label="房间名称">
          <el-input v-model="fromupodate.roomName" />
        </el-form-item>
        <el-form-item label="门市价">
          <el-input v-model="fromupodate.roomPrice" />
        </el-form-item>
        <el-form-item label="押金">
          <el-radio-group v-model="fromupodate.deposit">
            <el-radio value="false">不需要</el-radio>
            <el-radio value="true">需要</el-radio>
         </el-radio-group>
        </el-form-item>
      <el-form-item label="房型面积">
          <el-input v-model="fromupodate.area" />
        </el-form-item>
        <el-form-item label="可住人数">
          <el-input v-model="fromupodate.number" />
        </el-form-item>
        <el-form-item label="可否加床">
          <el-radio-group v-model="fromupodate.extraBed">
        <el-radio value="1">不可加床</el-radio>
        <el-radio value="2">免费家床</el-radio>
        <el-radio value="3">收费加床</el-radio>
        <el-radio value="4">自定义</el-radio>
      </el-radio-group>
        </el-form-item>
       
      <el-form-item label="房型照片">
        <el-upload
          class="avatar-uploader"
          action="https://localhost:44392/PostImag"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="fromupodate.roomPhoto" :src="fromupodate.roomPhoto" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
      </el-form-item>

      <el-form-item label="房型视频">
        <el-upload
          class="avatar-uploader"
          action="https://localhost:44392/PostImag"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="fromupodate.roomVideo" :src="fromupodate.roomVideo" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
      </el-form-item>
      <el-form-item label="VR">
        <el-upload
          class="avatar-uploader"
          action="https://localhost:44392/PostImag"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="fromupodate.roomVail" :src="fromupodate.roomVail" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
      </el-form-item>
      <el-form-item label="房型介绍">
      <el-input v-model="fromupodate.roomDesc" type="textarea" />
    </el-form-item>
     
    <el-form-item>
      <el-button type="primary" @click="GetRoomTypeUpdate">确定</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
    </span>
  </el-drawer>

  <el-dialog v-model="dialogTableVisible" :title="'设置房号'+'('+login.logtitle+')'" width="800">
    <el-button type="primary" @click="Getadd()">新增房号</el-button>
    <el-table :data="RoomNodata" >
      <el-table-column property="roomNO" label="房号"  />
      <el-table-column property="roomSort" label="排序"  />
      <el-table-column property="roomRemark" label="备注" />
      <el-table-column  label="操作" >
        <template  #default="{row}">
          <el-button type="text">修改</el-button>
          <el-button type="text">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>

  <el-dialog v-model="dialogFormVisible" title="新增房号" width="500">
    <el-form :model="RoomnoDatass">
      <el-form-item label="房号" >
        <el-input v-model="RoomnoDatass.roomNO" />
      </el-form-item>
      <el-form-item label="排序" >
        <el-input v-model="RoomnoDatass.roomSort" />
      </el-form-item>
      <el-form-item label="备注" >
        <el-input v-model="RoomnoDatass.roomRemark" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addsss()">确定</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">
          取消
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>
<script setup lang="ts">
import { ref, reactive, onMounted, resolveDirective } from 'vue'
import { ElTable } from 'element-plus'
import { ElMessageBox } from 'element-plus'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
const dialogTableVisible = ref(false)
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const drawer = ref(false)
const drawer1 = ref(false)
import axios from 'axios'
//显示
//#region 
//显示查询条件
const Roomtype=reactive({
  roomTypeName:''
})
//显示
const RoomtypeData=ref([]);
//显示方法
const GetRoomType=()=>{
  axios.get("https://localhost:44392/RoomTypeShow",{
    params:{
      roomTypeName:Roomtype.roomTypeName
    }
  }).then(res=>{
    RoomtypeData.value=res.data.data;
  })
}
//#endregion
//添加
//#region 
const from=reactive({
  roomName: "",
  roomPrice: 0,
  deposit: true,
  area: "",
  number: 0,
  cohabitation: true,
  extraBed: '',
  roomPhoto: "",
  roomVideo: "",
  roomVail: "",
  roomDesc: ""
})

//添加
const RoomAdd=()=>{
  axios.post("https://localhost:44392/RoomTypeAdd",from).then(res=>{
    if(res.data.code==200){
        ElMessage.success(res.data.msg);
        GetRoomType();
    }
    else{
      ElMessage.error(res.data.msg);
    }
  })
}

//#endregion
//修改
//#region 
const fromupodate=ref({
  id:0,
  roomName: "",
  roomPrice: 0,
  deposit: 0,
  area: "",
  number: 0,
  cohabitation: true,
  extraBed: 0,
  roomPhoto: "",
  roomVideo: "",
  roomVail: "",
  roomDesc: ""
})
const Getupdate=(row:any)=>{
  drawer1.value=true;
  fromupodate.value=row;
  console.log(fromupodate.value)
}
const GetRoomTypeUpdate=()=>{
      axios.put("https://localhost:44392/RoomTypeUpdate",fromupodate.value).then(res=>{
        if(res.data.code==200){
              ElMessage.success(res.data.msg);
              GetRoomType();

        }
      })
}

//#endregion
//单删
//#region 
const GetdelRoomType=(row:any)=>{
  ElMessageBox.confirm(
    '确认删除吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      axios.delete("https://localhost:44392/RoomTypeDel?id="+row.id).then(res=>{
      if(res.data.code==200){
          ElMessage.success(res.data.msg);
          GetRoomType();
      }
    })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })
   
}
//#endregion
//批删
//#region 
//批量删除
const selectedRows = ref<InstanceType<typeof ElTable>>();
  const handleAllDelete = () => {
  ElMessageBox.confirm(
    '确认要删除吗?',
    '错误',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      const selectedRowss=selectedRows.value?.getSelectionRows();
   if(!selectedRowss||selectedRowss.length==0){
     ElMessage.error('请选择要删除的数据');
     return;
   }
   const ids=selectedRowss.map((item:any)=>item.id);
   console.log(selectedRowss);
   console.log(ids.toString);
   axios.delete('https://localhost:44392/BatchRoomTypeDel',{
    params:{
          ids:ids.toString()
        },
      }).then(res => {
        if (res.data.code == 200) {
          ElMessage.success(res.data.msg)
          GetRoomType()
        } else {
          ElMessage.error(res.data.msg)
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    }) 
  };
//#endregion
//新增房号
//#region 

const login=reactive({
  logtitle:''
})
const RoomNo=(row:any)=>{
  dialogTableVisible.value=true
  RoomNodatashow.roomTypeId=row.id;
  login.logtitle=row.roomName
  console.log(RoomNodatashow.roomTypeId)
  GetRoomNo();
}
const RoomnoDatass=reactive({
  roomTypeId: "",
  roomNO: "",
  roomSort: "",
  roomStatus: true,
  roomRemark: ""
})
const Getadd=()=>{
  console.log(RoomNodatashow.roomTypeId)
dialogFormVisible.value=true;
}
const addsss=()=>{
  RoomnoDatass.roomTypeId=RoomNodatashow.roomTypeId
  axios.post("https://localhost:44392/RoomNoAdd",RoomnoDatass).then(res=>{
if(res.data.code==200){
    ElMessage.success(res.data.msg);
}
})
}
//#endregion

//房号显示
//#region 
const RoomNodata=ref([]);
const RoomNodatashow=reactive({
  roomTypeId:'',
})
const GetRoomNo=()=>{
  axios.get("https://localhost:44392/RoomNoShow",{
    params:{
      roomTypeId:RoomNodatashow.roomTypeId,
    }
  }).then(res=>{
    RoomNodata.value=res.data.data;
  })
}
//#endregion
onMounted(()=>{
  GetRoomType();

})
///照片的样式
//#region
const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  
) => {
  from.roomPhoto = response
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}
//#endregion

</script>
<style>
.parent {
  display: flex;        
  align-items: center;   
  height: 100vh;        
}
</style>
<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>